import React, { useState } from "react";
import { Table, Button, Input, Modal, Form } from "antd";
const PetBrowsePage = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const data = [
    {
      key: "1",
      id: "001",
      image: "https://via.placeholder.com/50",
      name: "宠物1",
      category: "猫",
      breed: "品种1",
      status: "待领养",
    },
    // 其他宠物数据
  ];

  const columns = [
    {
      title: "序号",
      dataIndex: "key",
      key: "key",
    },
    {
      title: "编号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "宠物图片",
      dataIndex: "image",
      key: "image",
      render: (text) => <img src={text} alt="宠物" />,
    },
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "种类",
      dataIndex: "category",
      key: "category",
    },
    {
      title: "品种",
      dataIndex: "breed",
      key: "breed",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <>
          <Button onClick={() => console.log("查看详情", record)}>详情</Button>
          <Button onClick={() => setIsModalVisible(true)}>申请领养</Button>
        </>
      ),
    },
  ];

  const handleOpenModal = () => {
    setIsModalVisible(true);
  };

  const handleCloseModal = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <Input placeholder="搜索宠物" style={{ marginBottom: 20 }} />
      <Table columns={columns} dataSource={data} />
      <Modal
        title="宠物领养申请"
        open={isModalVisible}
        onClose={handleCloseModal}
        footer={[
          <Button key="cancel" onClick={handleCloseModal}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleCloseModal}>
            提交
          </Button>,
        ]}
      >
        <Form>
          <Form.Item
            name="reason"
            rules={[{ required: true, message: "请输入申请理由" }]}
          >
            <Input placeholder="申请理由" />
          </Form.Item>
          <Form.Item
            name="plan"
            rules={[{ required: true, message: "请输入领养计划" }]}
          >
            <Input placeholder="领养计划" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default PetBrowsePage;
